<template>

    <div class="parentdiv">
        <HomeTop></HomeTop>
        <HomeRight></HomeRight>
        <div class="shoppingcart-logo"><img
                src="https://gw.alicdn.com/imgextra/i2/O1CN0188c2Ev1uamjpGQBxv_!!6000000006054-2-tps-252-120.png">
            <h2>购物车</h2>
        </div>
        <div class="under-logo">
            <div id="one" class="all-items" @click="ChangeOption($event)">
                <img
                    src="	https://img.alicdn.com/imgextra/i3/O1CN01cSckuL1rZ0SuPp3CW_!!6000000005644-2-tps-48-48.png"></img>
                <h3>全部商品({{ all }})</h3>
            </div>
            <div id="two" class="qvan" @click="ChangeOption($event)">
                <img
                    src="https://img.alicdn.com/imgextra/i4/O1CN01K54O2W1kDINaR0LwX_!!6000000004649-2-tps-48-48.png"></img>
                <h3>消费券</h3>
            </div>
            <div id="three" class="jiangjia" @click="ChangeOption($event)">
                <img
                    src="https://img.alicdn.com/imgextra/i4/O1CN01QEA5sq1NHCayKabd0_!!6000000001544-2-tps-48-48.png"></img>
                <h3>降价</h3>
            </div>
        </div>
        <div id="under-line" class="under-line"></div>
        <div class="part3">
            <input type="checkbox"></input>
            <h3>全选</h3>
            <button class="sc-button">移入收藏</button>
            <button class="del-button">删除</button>
        </div>
        <div class="part4" v-show="showpart4">
            <span class="fenlei" @click="showfenleimethod($event)">分类<i class="iconfont icon-xiala"></i></span>
            <span class="status" @click="showstatusmethod($event)">状态<i class="iconfont icon-xiala"></i></span>
            <input type="text" placeholder="搜索购物车内商品" class="search"></input>
            <div class="search-icon"><i class="iconfont icon-sousuo"></i></div>
        </div>
        <div class="under-fenlei" v-show="showfenlei" @click.stop="">
            <ul>
                <li>食品</li>
                <li>服装</li>
            </ul>
        </div>
        <div class="under-status" v-show="showstatus" @click.stop="">
            <ul>
                <li>待付款</li>
                <li>待收货</li>
            </ul>
        </div>
         <ShoppingCartSearch></ShoppingCartSearch>
        <div class="part5">
           
            <div class="jiesuan">
                <h3 class="first">结算明细</h3>
                <img
                    src="https://img.alicdn.com/imgextra/i4/O1CN01CIC9vl1ISaHmqoYNZ_!!6000000000892-55-tps-140-140.svg"></img>
                <h3 class="second">选择商品查看实际支付价格</h3>
                <h3 class="third">合计：</h3>
                <h2>￥{{ totalPrice }}</h2>
                <button class="jiesuan-button">结算</button>
            </div>
        </div>
        <div class="part6" v-show="showpart6">
            <hr class="line1">
            </hr>

            <div class="part6-list" v-for="value in 3">
                <input class="checkbox1" type="checkbox"></input>
                <div class="adtext">
                    <img
                        src="https://gw.alicdn.com/imgextra/i2/O1CN01Mo9BIf1DOOTmHgOR1_!!6000000000206-2-tps-102-48.png"></img>
                    <span class="text1">吃货妞妞食品旗舰店</span>
                </div>
                <div class="shopping-details">
                    <input class="shopping-checkbox" type="checkbox"></input>
                    <img class="shopping-img" src="https://img.alicdn.com/imgextra/i1/2128031955/O1CN010U9Kzg1QJRNppU6Vk_!!2128031955-0-alimamacc.jpg"></img>
                    <h3 class="shopping-text">魔法士干脆面48包整箱装捏碎怀旧干吃面掌心面零食休闲小吃食品</h3>
                    <h3 class="shopping-ad">15天保价&nbsp;破损包装&nbsp;急速退款</h3>
                    <h3 class="shopping-kouwei">口味：【尝鲜8包】混合多口味20g*8包</h3>
                    <h3 class="qvan-price">￥5.9券后价</h3>
                    <h3 class="shopping-price">￥12.9</h3>
                    <div class="shopping-num-div">
                        <button class="shopping-di">-</button>
                        <span class="shopping-num">1</span>
                        <button class="shopping-add">+</button>
                    </div>
                    <button class="addshoucang">移入收藏</button>
                    <button class="shopping-delete">删除</button>
                </div>
                <hr class="line2">
                </hr>
            </div>
        </div>
        <div class="part7" v-show="showpart7">
            <h2 class="guess">猜你喜欢</h2>
            <div class="part7-row-items" v-for="value in 3">
                <div class="part7-item">
                    <div class="list-item" v-for="item in 4">
                        <img src="https://img.alicdn.com/imgextra/i1/2128031955/O1CN010U9Kzg1QJRNppU6Vk_!!2128031955-0-alimamacc.jpg"
                            alt="商品图片"></img>
                        <h2 class="itemName">烤肉牛排</h2>
                        <h1 class="item-price">￥20.00</h1>
                        <h2 class="ms">1000+人购买</h2>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script>
import HomeTop from "@/components/HomeTop.vue";
import HomeRight from "@/components/HomeRight.vue";
import "../style/ShoppingCart.css";
import ShoppingCartSearch from "@/components/ShoppingCartSearch.vue";

export default {
  name: "ShoppingCart",
  data() {
    return {
      all: 0,
      currentOption: "one",
      showfenlei: false,
      showstatus: false,
      showpart4: true,
      showpart6: true,
      showpart7: true,
      totalPrice: 0,
    };
  },
  methods: {
    ChangeOption(event) {
      this.currentOption = event.currentTarget.id;

      if (this.currentOption == "one") {
        document.getElementById("under-line").style.left = "9.7rem";
        this.showpart4 = true;
        this.showpart6 = true;
        this.showpart7 = true;
      } else if (this.currentOption == "two") {
        document.getElementById("under-line").style.left = "18.75rem";
        this.showpart4 = false;
        this.showpart6 = false;
        this.showpart7 = false;
      } else if (this.currentOption == "three") {
        document.getElementById("under-line").style.left = "26.6rem";
        this.showpart4 = false;
        this.showpart6 = false;
        this.showpart7 = false;
      }
    },

    showfenleimethod(event1) {
      const that = this;
      const targetElement = event1.currentTarget; // 保存分类按钮元素

      // 先切换一次状态（点击按钮时的核心操作）
      that.showfenlei = !that.showfenlei;

      // 移除之前可能绑定的监听，避免重复
      document.removeEventListener("click", handleClick);

      // 定义外部点击的处理函数
      function handleClick(event2) {
        // 关键：如果点击的是分类按钮本身或其内部元素，直接返回不处理
        if (targetElement.contains(event2.target)) {
          return;
        }

        // 到这里说明是外部点击，关闭弹窗
        that.showfenlei = false;
        // 移除监听，避免后续无效执行
        document.removeEventListener("click", handleClick);
      }

      // 只有当弹窗打开时，才需要监听外部点击
      if (that.showfenlei) {
        document.addEventListener("click", handleClick);
      }
    },
    showstatusmethod(event1) {
      const that = this;
      const targetElement = event1.currentTarget;
      that.showstatus = !that.showstatus;
      document.removeEventListener("click", handleClick);
      function handleClick(event2) {
        if (targetElement.contains(event2.target)) {
          return;
        }
        that.showstatus = false;
        document.removeEventListener("click", handleClick);
      }
      if (that.showstatus) {
        document.addEventListener("click", handleClick);
      }
    },
 
  },
};
</script>